<template>
  <div>
    <el-breadcrumb separator-class="ArrowRight">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>商品管理</el-breadcrumb-item>
      <el-breadcrumb-item>商品类别</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input placeholder="请输入类别名称" suffix-icon="Search" v-model="queryInfo.name" clearable
            @clear="getCategories" @change="getCategories">
          </el-input>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="showAddCategoryDialog">添加</el-button>
        </el-col>
      </el-row>
      <!-- 类别列表 -->
      <el-table :data="catelist" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="类别名称" prop="name"></el-table-column>
        <el-table-column label="操作" width="180px">
          <template v-slot="scope">
            <el-button type="primary"  icon="Edit" size="mini"
              @click="openEditCateDialog(scope.row.id)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- 添加商品类别对话框 -->
    <el-dialog title="添加商品类别" v-model="addCategoryDialogVisible" width="40%" @close="resetAddCategoryForm()">
      <el-form ref="addCategoryFormRef" :model="addCategoryForm" :rules="addCategoryFormRules" label-width="10px"
        class="login-form">
        <!-- 商品类别名称 -->
        <el-form-item prop="name">
          <el-input v-model="addCategoryForm.name" placeholder="请输入商品类别名称"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="addCategoryDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="addCategory()">确 定</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改商品类别对话框 -->
    <el-dialog title="修改商品类别" v-model="editCategoryDialogVisible" width="50%">
      <el-form :model="editCategoryForm" :rules="editCategoryFormRules" ref="editCategoryFormRef" label-width="90px">
        <el-form-item label="商品类别" prop="name">
          <el-input v-model="editCategoryForm.name"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="editCategoryDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="editCategory()">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup>
import { ref, reactive, onMounted, getCurrentInstance, nextTick } from "vue";

const { proxy } = getCurrentInstance();
const catelist = ref(null);
const queryInfo = reactive({
  name: "",
});
const getCategories = async () => {
  // 分页获取管理员列表
  const { data: res } = await proxy.$axios.get("categories", {
    params: {
      name: queryInfo.name,
    },
  });
  if (res.code != 0) {
    catelist.value = [];
    return proxy.$message.error("没有商品类别记录!");
  }
  catelist.value = res.categories;
};
const addCategoryForm = reactive({
  name: "",
});
const editCategoryForm = reactive({
  name: "",
  id: "",
});
const addCategoryFormRef = ref(null);
const editCategoryFormRef = ref(null);
const addCategoryFormRules = reactive({
  name: [
    { required: true, message: "请输入商品类别名称", trigger: "blur" },
  ],
});
const editCategoryFormRules = reactive({
  name: [
    { required: true, message: "请输入商品类别名称", trigger: "blur" },
  ],
});
const addCategoryDialogVisible = ref(false);
const editCategoryDialogVisible = ref(false);

// 显示添加商品分类对话框
const showAddCategoryDialog = async () => {
  console.log("打开添加商品类别对话框");
  // await nextTick();
  addCategoryDialogVisible.value = true;
  await nextTick();
};

// 重置添加商品类别对话框中的表单
const resetAddCategoryForm = () => {
  console.log(addCategoryFormRef.value);
  addCategoryFormRef.value.resetFields();
};

// 添加商品类别
const addCategory = () => {
  addCategoryFormRef.value.validate(async (valid) => {
    if (!valid) return;
    var name = addCategoryForm.name;
    // 判断商品类别名称是否已存在
    const { data: res1 } = await proxy.$axios.get(`categories/name/${name}`);
    if (res1.code !== 0) return proxy.$message.error("该商品类别名称已存在!");
    const { data: res2 } = await proxy.$axios.post(`categories`, {
      name: name,
    });
    if (res2.code !== 0) return proxy.$message.error("添加失败!");
    proxy.$message.success("添加成功!");
    getCategories();
    addCategoryDialogVisible.value = false;
  });
};

// 打开修改对话框
const openEditCateDialog = async (id) => {
  editCategoryDialogVisible.value = true;
  const { data: res } = await proxy.$axios.get(`categories/id/${id}`);
  await nextTick();
  // console.log(res.category);
  if (res.code != 0) return proxy.$message.error("获取数据失败!");
  editCategoryForm.name = res.category.name;
  editCategoryForm.id = res.category.id;
};

// 修改商品类别
const editCategory = () => {
  editCategoryFormRef.value.validate(async (valid) => {
    if (!valid) return;
    var name = editCategoryForm.name;
    var id = editCategoryForm.id;
    // 判断商品类别名称是否已存在
    const { data: res1 } = await proxy.$axios.get(
      `categories/name/${name}/id/${id}`
    );
    if (res1.code !== 0)
      return context.root.$message.error("该商品类别名称已存在!");
    const { data: res2 } = await proxy.$axios.put(`categories`, {
      name: name,
      id: id,
    });
    if (res2.code !== 0) return proxy.$message.error("修改失败!");
    proxy.$message.success("修改成功!");
    getCategories();
    editCategoryDialogVisible.value = false;
  });
};

onMounted(() => {
  getCategories();
});


</script>
<style lang="less" scoped></style>
